<template>
    <div class="container">
        <div class="content_wrapper">
            <div class="lyecs-form-table">
                <el-form ref="formRef" :rules="rules" :model="form" label-width="auto">
                    <el-form-item prop="promotion_type_data" v-if="rules_type == 1">
                        <div class="flex mb10">
                            <div class="flex">
                                <el-button type="primary" :icon="Plus" link @click="addPreferential" :disabled="form.promotion_type_data.length >= 5">
                                    {{form.promotion_type_data.length >= 5 ? '多添加5级优惠' : '添加下一级优惠'}}
                                </el-button>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item prop="promotion_type_data">
                        <el-table :data="form.promotion_type_data" style="width: 100%">
                            <el-table-column label="层级" width="50" v-if="rules_type == 1">
                                <template #default="{ $index }">
                                    {{ $index + 1 }}
                                </template>
                            </el-table-column>
                            <el-table-column label="门槛" prop="min_amount" width="170">
                                <template #default="{ row, $index }">
                                    <el-form-item :prop="'promotion_type_data.' + $index + '.min_amount'" :rules="rules.min_amount">
                                        <div class="flex flex-align-center" v-if="rules_type == 1">
                                            <p class="mr10">满</p>
                                            <el-input type="number" v-model="row.min_amount" style="width: 90px;"></el-input>
                                            <p class="ml10">{{unit == 1 ? '元' : '件'}}</p>
                                        </div>
                                        <div class="flex flex-align-center" v-if="rules_type == 0">
                                            <p class="mr10">每满</p>
                                            <el-input type="number" v-model="row.min_amount" style="width: 90px;"></el-input>
                                            <p class="ml10">{{unit == 1 ? '元' : '件'}}</p>
                                        </div>
                                    </el-form-item>
                                </template>
                            </el-table-column>
                            <el-table-column prop="reduce" v-if="promotion_type == 1 || promotion_type == 2">
                                <template #header>
                                    <div>
                                        <el-popover
                                            placement="top"
                                            :width="200"
                                            trigger="click"
                                        >
                                            <template #reference>
                                                <el-button type="info" link style="font-size:12px;font-weight:bold;">
                                                    减价/折扣 已选: ({{promotion_type == 1? '减价' : '折扣'}})<el-icon class="el-icon--right"><ArrowDownBold /></el-icon>
                                                </el-button>
                                            </template>
                                            <template #default>
                                                <div class="check_list">
                                                    <el-radio-group v-model="promotion_type">
                                                        <div class="flex flex-align-center flex-justify-center">
                                                            <div style="margin-right:30px;">
                                                                <el-radio label="减价" :value="1"/>
                                                            </div>
                                                            <div v-if="rules_type">
                                                                <el-radio label="折扣" :value="2"/>
                                                            </div>
                                                        </div>
                                                    </el-radio-group>
                                                </div>
                                            </template>
                                        </el-popover>
                                    </div>
                                </template>
                                <template #default="{ row, $index }">
                                    <el-form-item :prop="'promotion_type_data.' + $index + '.reduce'" :rules="rules.reduce">
                                        <div class="flex flex-align-center" v-if="promotion_type == 1">
                                            <p class="mr10">减</p>
                                            <el-input type="number" v-model="row.reduce" style="width: 90px;" :disabled="row.min_amount <= 0"></el-input>
                                            <p class="ml10">元</p>
                                        </div>
                                        <div class="flex flex-align-center" v-if="promotion_type == 2">
                                            <p class="mr10">打</p>
                                            <el-input type="number" v-model="row.reduce" style="width: 90px;" :disabled="row.min_amount <= 0"></el-input>
                                            <p class="ml10">折</p>
                                        </div>
                                    </el-form-item>
                                </template>
                            </el-table-column>
                            <el-table-column label="送赠品" prop="date" v-if="promotion_type == 3" width="150">
                                <template #default="{ row, $index }">
                                    <el-form-item :prop="'promotion_type_data.' + $index + '.gift_id'" :rules="rules.gift_id">
                                        <SelectGift
                                            v-model:gift_id="row.gift_id"
                                            v-model:gift_name="row.gift_name"
                                            v-model:gift_stock="row.gift_stock"
                                            :isMultiple="false"
                                        ></SelectGift>
                                    </el-form-item>
                                </template>
                            </el-table-column>
                            <el-table-column label="赠品数量" prop="num" v-if="promotion_type == 3">
                                <template #default="{ row, $index }">
                                    <el-form-item :prop="'promotion_type_data.' + $index + '.num'" :rules="rules.num">
                                        <el-input type="number" v-model="row.num" :max="row.gift_stock" style="width: 90px;" :disabled="row.gift_id == ''"></el-input>
                                    </el-form-item>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" fixed="right" width="100" v-if="rules_type == 1">
                                <template #default="{ row, $index }">
                                    <el-button v-if="$index > 0" type="primary" link @click="del($index)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { Plus, ArrowDownBold } from '@element-plus/icons-vue'
import { onMounted, reactive, watch, shallowRef } from "vue";
import type { FormRules } from "element-plus";
import { SelectGift } from "@/components/select";
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";
const props = defineProps({
    unit: {
        type: Number,
        default: 0
    },
    rules_type: {
        type: Number,
        default: 0
    },
    promotion_type_data: {
        type: Array,
        default: []
    }
});
const formRef = shallowRef();
// 监听 rules_type 的变化
watch(() => props.rules_type, (newVal) => {
    console.log(newVal);
    if(newVal === 0){
        promotion_type.value = 1;
        if(promotion_type.value == 1 || promotion_type.value == 2){
            if(form.promotion_type_data.length <= 5){
                form.promotion_type_data = [{
                    min_amount: "",
                    reduce: "",
                }]
            }
        }else{

            form.promotion_type_data = [{
                min_amount: "",
                reduce: "",
                gift_id:"",
                gift_stock:0,
                gift_name: "",
                num: 1
            }]
        }
    }
});
const promotion_type = defineModel("promotion_type", {type: Number, default: 0});
const form = reactive({
  promotion_type_data: props.promotion_type_data
});
const validateReduce = (rule: any, value: any, callback: any, min_amount: any, rowIndex: number) => {
    if(promotion_type.value == 1 && props.unit == 1){
        if (value === ''){
            callback(new Error('请输入金额数'));
        }else if(value >= Number(min_amount)){
            callback(new Error('应小于门槛金额'));
            (form.promotion_type_data[rowIndex] as any).reduce = (min_amount - 0.01)
        }else if(value < 0.01 || value > 99999){
            callback(new Error('输入范围为0.01-99999'));
            (form.promotion_type_data[rowIndex] as any).reduce = 0.01
        }else{
            callback()
        }
    }else{
        callback()
    }
    if(promotion_type.value == 2){
        if (value === ''){
            callback(new Error('请输入折扣'));
        }else if(value < 0.1 || value > 9.9){
            callback(new Error('折扣范围为0.1-9.9'));
            (form.promotion_type_data[rowIndex] as any).reduce = 0.1
        }else{
            callback()
        }
    }
    
};
const validateMinAmount = (rule: any, value: any, callback: any) => {
    if (value === ''){
        callback(new Error('请输入门槛数值'));
    }else if(Number(value) < 0){
        callback(new Error('门槛数值必须为正数'));
    }else{
        callback()
    }
};
const validateGiftId = (rule: any, value: any, callback: any) => {
    if (value === ''){
        callback(new Error('请选择赠品'));
    }else{
        callback()
    }
};
const validateNum = (rule: any, value: any, callback: any, gift_stock: any, rowIndex: number) => {
    if (value === ''){
        callback(new Error('请输入赠品数量'));
    }else if(Number(value) <= 0){
        callback(new Error('赠品数量必须为正数'));
        (form.promotion_type_data[rowIndex] as any).num = 1
    }else if(Number(value) > Number(gift_stock)){
        callback(new Error('赠品数量不能大于库存'));
        (form.promotion_type_data[rowIndex] as any).num = gift_stock
    }else{
        callback()
    }
};
interface RuleForm {
    min_amount: number;
    reduce: number;
    num: number;
    gift_id: number;
}
const rules = reactive<FormRules<RuleForm>>({
    min_amount: [{ required: true, validator: validateMinAmount, trigger: 'blur' }],
    gift_id: [{ required: true, validator: validateGiftId, trigger: 'blur' }],
    reduce: [{ required: true, validator: (rule:any, value, callback) => {
        const regex = /\.(\d+)\./;
        const match:any = rule?.field.match(regex);
        const rowIndex = match[1];
        const min_amount = (form.promotion_type_data[rowIndex] as any).min_amount;
        validateReduce(rule, value, callback, min_amount, rowIndex);
    }, trigger: 'blur' }],
    num: [{ required: true, validator: (rule:any, value, callback) => {
        const regex = /\.(\d+)\./;
        const match:any = rule?.field.match(regex);
        const rowIndex = match[1];
        const gift_stock = (form.promotion_type_data[rowIndex] as any).gift_stock;
        validateNum(rule, value, callback, gift_stock, rowIndex);
    }, trigger: 'blur' }]
});
const addPreferential = () => {
    if(promotion_type.value == 1 || promotion_type.value == 2){
        if(form.promotion_type_data.length <= 5){
            form.promotion_type_data.push({
                min_amount: "",
                reduce: "",
            });
        }
    }else{
        form.promotion_type_data.push({
            min_amount: "",
            reduce: "",
            gift_id:"",
            gift_stock:0,
            gift_name: "",
            num: 1
        });
    }
};
const del = (index: number) => {
    form.promotion_type_data.splice(index, 1);
};
onMounted(() => {
    if(props.rules_type == 1 && props.promotion_type_data.length == 0){
        addPreferential()
    }
});
defineExpose({ formRef, form });
</script>
<style lang="less" scoped>
.lyecs-form-table{
    width: 650px;
    margin-top: 15px;
    :deep(.el-table .cell){
        overflow: visible !important;
    }
    :deep(.el-form-item__error){
        position: absolute !important;
        z-index: 99;
        top: 32px !important;
    }
}
</style>
